<template>
	<view class="">
		<!-- <view class="header">
			<uni-icons @click="back" color="#fff" type="left" size="26"></uni-icons>
			<view class="txt">
				余额转账
			</view>
			<label @click="recordListHandler" style="padding-right: 28rpx;">记录</label>
		</view> -->
		
		<view class="appBox">
			<view class="j-bg" style="position: relative;">
				<text class="txt">可用余额</text>
				<text class="num">{{ userInfoScore }}</text>
				<view style="position: absolute;right:20px;top: 20px;" @click="recordListHandler" >记录 ></view>
			</view>
			<!-- 收益记录 -->
			<view class="footer">
				<view class="menus">
					<view @click="menuClick(item.key)" :class="{ 'menu-item-active': active == item.key }"
						class="menu-item" v-for="item in menu" :key="item.key">
						{{ item.title }}
					</view>
				</view>
				<view class="list-input">
					<form>
						<view class="item">
							<view class="acea-row row-middle">
								<input type="number" class="texts" placeholder="输入转出金额" v-model="lbTransferRecord.money"
									required />
							</view>
						</view>
						<view class="item">
							<view class="acea-row row-middle">
								<input type="text" class="texts" maxlength="11" placeholder="输入接收用户手机号"
									v-model="lbTransferRecord.phone" required />
							</view>
						</view>
						<view class="item">
							<view class="acea-row row-middle">
								<input type="password" class="texts" maxlength="6" placeholder="输入交易密码"
									v-model="lbTransferRecord.payPass" required />
							</view>
						</view>
						<view class="item">
							<view class="acea-row row-middle">
								<input type="text" class="texts" placeholder="备注" v-model="lbTransferRecord.remarks"
									required />
							</view>
						</view>
					</form>
				</view>
			 <view class="remark" v-if="config.transferNote">
					<text>温馨提示：</text>
					<text>{{config.transferNote}}</text>
				<!-- 	<text>{{
		      active == 1
		        ? "转出需要收取10%手续费及个税费"
		        : "转到交易宝，可以进行金币的出售"
		    }}</text> -->
				</view>  
			</view>
			<button class="btn" @click="rollOut">立即转出</button>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		amountTransfer
	} from "@/api/user";
	const menu = [
		// {
		// 	key: 1,
		// 	title: '互转'
		// },
		// {
		// 	key: 2,
		// 	title: '交易宝'
		// },
	];
	export default {
		data() {
			return {
				userInfoScore: "",
				menu,
				active: 1,
				lbTransferRecord: {
					type: 1
				},
				config:{}
			};
		},
		onLoad() {
			this.getUserInfos();
			this.config = uni.getStorageSync("pay_type_config"); 
		},
		methods: {
			recordListHandler(){
				uni.navigateTo({
					url:'/pages/users/user_cash/commission'
				})
			},
			back(){
				uni.navigateBack()
			},
			menuClick(key) {
				this.active = key;
			},
			async getUserInfos() {
				getUserInfo()
					.then((res) => {
						this.userInfoScore = res.data.money;
					})
					.catch((res) => {
						this.$util.Tips({
							title: res,
						});
					});
			},
			rollOut() {
				if(this.config){
					if(this.config.transOut == 1){
					return this.$util.Tips({
						title: this.config.message
					});
					}
				}
				
				if (!this.lbTransferRecord.money)
					return this.$util.Tips({
						title: "请输入转出金额",
					});
				if (!this.lbTransferRecord.phone)
					return this.$util.Tips({
						title: "请输入接收用户",
					});
				if (
					!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.lbTransferRecord.phone)
				)
					return this.$util.Tips({
						title: "请输入正确的接收用户",
					});
				if (!this.lbTransferRecord.payPass)
					return this.$util.Tips({
						title: "请输入交易密码",
					});
				amountTransfer(this.lbTransferRecord)
					.then((res) => {
						this.$util.Tips({
							title: res.message,
						});
						this.lbTransferRecord = {type: 1};
						setTimeout(() => {
							this.getUserInfos();
						}, 800)
					})
					.catch((res) => {
						this.$util.Tips({
							title: res,
						});
						uni.hideLoading();
					});
			},
		},
	};
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	@import url("../../../static/css/gstyle.scss");

	.header {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 16px;
		height: 44px;
		color: #fff;
		background: #4389F1;
		padding: 7px 3px;

		.txt {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.appBox {
		background-color: #f2f6fd;
		height: 100%;
		padding: 16rpx 33rpx;

		.j-bg {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: white;
			height: 285rpx;
			width: 100%;
			background: url("/static/images/gold_bg.png") no-repeat;
			background-size: 100% 100%;
			padding: 39rpx 43rpx 31rpx 43rpx;
			font-family: PingFang SC;
			font-weight: 400;

			.txt {
				font-size: 28rpx;
			}

			.num {
				font-size: 66rpx;
			}
		}

		.footer {
			.menus {
				display: flex;
				margin-top: 57rpx;

				.menu-item {
					font-size: 30rpx;
					text-align: center;
					height: 89rpx;
					line-height: 89rpx;
					width: 342rpx;
					background: white;
				}

				.menu-item-active {
					background: $theme-color;
					color: white;
				}
			}

			.list-input {
				.item {
					border-bottom: 1px solid #f0f0f0;
					background: #fff;

					.row-middle {
						position: relative;
						padding: 0 25rpx;
						margin-top: 20rpx;

						.texts {
							flex: 1;
							font-size: 28rpx;
							height: 89rpx;
							line-height: 80rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						input {
							flex: 1;
							font-size: 28rpx;
							height: 80rpx;
							line-height: 80rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}

		.remark {
			display: flex;
			flex-direction: column;
			align-items: self-start;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #93b3e2;
			margin-top: 60rpx;
		}
	}

	page {
		background-color: #fff !important;
	}
</style>